<template>
  <div>
    <a-row type="flex" justify="space-between" class="title">
      <a-col>{{title.tit}}</a-col>
      <a-col class="cp" v-if="title.soft" @click="softTag">返回上级>></a-col>
    </a-row>
    <ul v-if="contents.types === 'Array'">
      <li
        class="cp"
        v-for="(item,index) in contents.list"
        :key="index"
        @click="listItemTag(item)"
      >{{item[contents.n]}}</li>
    </ul>
    <div v-else class="box" v-html="contents.richtext"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: Object,
      default: {
        tit: "",
        soft: false
      }
    },
    contents: {
      type: Object,
      default: {
        types: "Array",
        list: [],
        n: "",
        richtext: ""
      }
    }
  },
  data() {
    return {};
  },

  methods: {
    softTag() {
      this.$emit("softTag");
    },
    listItemTag(item) {
      this.$emit("listItemTag", item);
    }
  }
};
</script>
<style lang="less" scoped>
.title {
  height: 46px;
  line-height: 46px;
  text-align: center;
  background: #eee;
  padding: 0 20px;
  div:nth-child(1) {
    font-size: 18px;
    font-weight: bold;
  }
  div:nth-child(2) {
    font-weight: 500;
    color: #0084ff;
  }
}
ul {
  padding: 8px 0 0 46px;
  li {
    list-style: decimal;
    height: 36px;
    &:hover {
      color: #0084ff;
    }
  }
}
.box {
  padding: 8px 30px;
}
</style>
